<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="utf-8">
		<title>商城首页</title>
		<!--字体图标-->
		<link href="../lib/javaex/pc/css/icomoon.css" rel="stylesheet" />
		<!--动画-->
		<link href="../lib/javaex/pc/css/animate.css" rel="stylesheet" />
		<!--骨架样式-->
		<link href="../lib/javaex/pc/css/common.css" rel="stylesheet" />
		<!--皮肤-->
		<link href="../lib/javaex/pc/css/skin/default.css" rel="stylesheet" />
		<!--jquery，不可修改版本-->
		<script src="../lib/javaex/pc/lib/jquery-1.7.2.min.js"></script>
		<!--核心组件-->
		<script src="../lib/javaex/pc/js/javaex.min.js"></script>
		<!--表单验证-->
		<script src="../lib/javaex/pc/js/javaex-formVerify.js"></script>
		<script src="../js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/userAuth.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.header {
				margin-top: 100px;
				background: #fff;
			}

			.search {
				width: 685px;
				margin: 120px auto 0px auto;
			}

			.search-input {
				width: 600px;
				height: 50px;
				line-height: 50px;
				padding: 0 10px;
				vertical-align: middle;
			}

			.input-button {
				height: 50px;
				width: 80px;
				font-size: 20px;
			}

			#head .w {
				height: 140px;
			}


			#menu>ul {
				display: block;
				list-style-type: disc;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				padding-inline-start: 40px;
				/* margin-top: 100px; */
			}

			.javaex-slide {
				border-radius: 4px;
			}

			.javaex-slide .javaex-slide-focus-title span.title {
				position: absolute;
				bottom: 9px;
				left: 10px;
				line-height: 22px;
				height: 22px;
				font-size: 14px;
				color: #fff;
				z-index: 10;
				white-space: nowrap;
				overflow: hidden;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
			}

			.javaex-slide-focus-box {
				position: absolute;
				width: 100%;
				height: 62px;
				bottom: 0;
				left: 0;
				background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .75)));
				background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
				background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .75) 100%);
				background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
			}

			.javaex-slide-focus-box ul {
				position: absolute;
				bottom: 9px;
				right: 8px;
			}

			.javaex-slide-focus-box ul li {
				margin-right: 10px;
				width: 64px;
				height: 48px;
				float: left;
				text-align: center;
				position: relative;
				overflow: hidden;
			}

			.javaex-slide-focus-box ul li img {
				border-radius: 4px;
				border: 2px solid #fff;
				cursor: pointer;
			}

			.javaex-slide-focus-box ul li.on img {
				border: 2px solid #f25d8e;
				-webkit-transition: left .3s ease;
				-o-transition: left .3s ease;
				transition: left .3s ease;
			}

			.javaex-slide {
				width: 650px;
				height: 332px;
			}

			.javaex-slide ul.javaex-slide-focus-bg li {
				width: 650px;
				;
				height: 332px;
			}

			.javaex-slide ul.javaex-slide-focus-bg img,
			.javaex-slide .javaex-slide-focus-box img {
				width: 100%;
				height: 100%;
			}

			.main {
				margin-top: 50px;
				min-width: 1000px;
			}

			.banner {
				margin: auto;
				width: 650px;
			}

			.menu {
				width: 0px;
			}

			.news {
				background-color: antiquewhite;
				/* border-style: solid; */
				/* border-width: 1px; */
				width: 200px;
				height: 350px;
				margin-top: 12px;
			}

			.red_font {
				font-size: 18px;
				color: red;
				text-align: center;
				margin-top: 10px;
			}

			.black_font {
				font-size: 15px;
				color: black;
				text-align: left;
				margin-left: 10px;
				margin-top: 5px;
			}

			.right_mid {
				color: black;
				/* border-style: solid; */
				width: 915px;
				height: 200px;
				margin-top: 30px;

			}

			.right_mid_pic {
				/* color: blue; */
				width: 192px;
				height: 200px;
				margin-left: 45px;
				/* border-style: solid; */
				float: left;
			}

			.right_mid_pic1 {
				/* color: blue; */
				width: 192px;
				height: 200px;
				margin-left: 2px;
				/* border-style: solid; */
				float: left;
			}

			.new1 {
				margin-top: 19px;
			}

			.root {
				width: 1300px;
				margin: auto;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="javaex-navbar">
				<div class="javaex-container-fluid clear">
					<!--logo名称-->
					<a href="./index.html">
						<div class="javaex-logo" style="color: #fff;">九美阁商城</div>
					</a>
					<!--左侧导航-->
					<ul class="javaex-nav fl">
						<li class="active"><a href="javascript:;">首页</a></li>						
					</ul>

					<!--右侧-->
					<ul class="javaex-nav fr">
						<li>
							<a href="./pages/userInfo.html">收货地址</a>
						</li>

						<li>
							<a href="./pages/shopCar.html">购物车</a>
							<!-- <ul class="javaex-nav-dropdown-menu" style="right: 10px;">
								<li><a href="javascript:;">退出当前账号</a></li>
							</ul> -->
						</li>

						<li>
							<a href="./pages/ordersInfo.html">我的订单</a>
						</li>

						<li>
							<a id="loginMsg" href="javascript:;">欢迎您，尊贵的九美阁会员</a>
							<ul id="loginOption" class="javaex-nav-dropdown-menu" style="right: 10px;">
								<li><a href="./login.html">登录</a></li>
								<li><a href="./register.html">注册</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<script>
				function loadLoginMsg() {
					var user = sessionStorage.getItem("user");
					if (user != null) {
						$("#loginMsg").text("欢迎你, " + JSON.parse(user).username);
						$("#loginOption").html(`
							<li><a href="./pages/userInfo.html">个人信息</a></li>
							<li><a href="javascript:logout();">退出登录</a></li>
						`);
					}
				}

				function logout() {
					sessionStorage.clear();
					localStorage.clear();
					window.location = './login.html';
				}
			</script>
		</header>
		<div class="root">

			<div class="header">
				<div class="search">
					<span class="javaex-search-group">
						<input id="search" type="text" class="search-input" placeholder="搜索商品" />
						<button id="searchButton" class="javaex-btn blue input-button">
							<span class="icon-search"></span>
						</button>
					</span>
				</div>
			</div>


			<div class="main javaex-grid">
				<div class="menu javaex-grid-3">
					<div class="javaex-menu-container" style=" top: 180px;left: 120px;">
						<div id="menu" class="javaex-menu">
							<ul>
								<li class="javaex-menu-item alone hover" style="background-color: #1B9AEE;">
									<a href="javaScript:;" style="color: #fff; font-size: larger; ">全部分类</a>
								</li>
							</ul>
							<ul>
								<li class="javaex-menu-item">
									<a href="javascript:;">点心/蛋糕<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">点心</a></li>
										<li><a href="javaScript:;">蛋糕</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">饼干/膨化<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">饼干</a></li>
										<li><a href="javaScript:;">膨化</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">熟食/肉类<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">熟食</a></li>
										<li><a href="javaScript:;">肉类</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">素食/卤味<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">素食</a></li>
										<li><a href="javaScript:;">卤味</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">坚果/炒货<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">坚果</a></li>
										<li><a href="javaScript:;">炒货</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">糖果/蜜饯<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">糖果</a></li>
										<li><a href="javaScript:;">蜜饯</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">巧克力<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">嘟嘟嘟</a></li>
										<li><a href="javaScript:;">...</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">海味/河鲜<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">海味</a></li>
										<li><a href="javaScript:;">河鲜</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">花茶/果茶<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">花茶</a></li>
										<li><a href="javaScript:;">果茶</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">品牌/礼包<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">品牌</a></li>
										<li><a href="javaScript:;">礼包</a></li>
									</ul>
								</li>
								<li class="javaex-menu-item">
									<a href="javascript:;">饼干/膨化<i class="icon-angle-down"></i></a>
									<ul>
										<li><a href="javaScript:;">饼干</a></li>
										<li><a href="javaScript:;">膨化</a></li>
									</ul>
								</li>

							</ul>
						</div>
					</div>

				</div>
				<div class="right javaex-grid-9">
					<div class="javaex-grid">
						<div class="banner javaex-grid-8">
							<!--幻灯片-->
							<div id="slide" class="javaex-slide">
								<!--背景大图-->
								<ul class="javaex-slide-focus-bg">
									<li>
										<a href="#">
											<img src="../img/1.jpg" />
										</a>
									</li>
									<li>
										<a href="#">
											<img src="../img/2.jpg" />
										</a>
									</li>
									<li>
										<a href="#">
											<img src="../img/3.jpg" />
										</a>
									</li>
									<li>
										<a href="#">
											<img src="../img/4.jpg" />
										</a>
									</li>
									<li>
										<a href="#">
											<img src="../img/5.jpg" />
										</a>
									</li>
								</ul>

								<!--焦点，如果不需要焦点的话，直接去掉这个div即可-->
								<div class="javaex-slide-focus-box">
									<ul>
										<li>
											<a href="javascript:;"><img src="../img/1.jpg" /></a>
										</li>
										<li>
											<a href="javascript:;"><img src="../img/2.jpg" /></a>
										</li>
										<li>
											<a href="javascript:;"><img src="../img/3.jpg" /></a>
										</li>
										<li>
											<a href="javascript:;"><img src="../img/4.jpg" /></a>
										</li>
										<li>
											<a href="javascript:;"><img src="../img/5.jpg" /></a>
										</li>
									</ul>
								</div>


							</div>
						</div>
						<div class="right-tip javaex-grid-3">
							<div class="news">
								<div class="new1">
									<div class="red_font icon-volume-medium">
										商城头条
									</div>
									<div class="black_font">
										<a href="#">[特惠]洋河年末大促销，低</a>
									</div>
									<div class="black_font">
										<a href="#">[公告]万达与九江市签署战</a>
									</div>
									<div class="black_font">
										<a href="#">[特惠]女生节商城爆品</a>
									</div>
									<div class="black_font">
										<a href="#">[公告]华北、华中部分地区></a>
									</div>
									<div class="black_font">
										<a href="#">[特惠]家电狂欢千亿礼券</a>
									</div>
									<div class="black_font">
										<a href="#">[特惠]拯救者系列</a>
									</div>
									<div class="black_font">
										<a href="#">[公告]驰星教育预祝考研学</a>
									</div>
									<div class="black_font">
										<a href="#">[特惠]YSL满500减50</a>
									</div>
									<div class="black_font">
										<a href="#">[公告]九美阁商城回馈老用</a>
									</div>
									<div class="black_font">
										<a href="#">[特惠]兰蔻小黑瓶限时降价</a>
									</div>
									<div class="black_font">
										<a href="#">[公告]欢迎骚琳入驻九美阁</a>
									</div>
								</div>
							</div>
						</div>

					</div>


					<div class="right_mid">
						<div class="right_mid_pic1">
							<div><img src="../img/Y7000.webp" style="width: 210px;height: 193px;"></div>
						</div>
						<div class="right_mid_pic">
							<div><img src="../img/MI11.webp" style="width: 210px;height: 193px;"></div>
						</div>
						<div class="right_mid_pic">
							<div><img src="../img/六味地黄丸.jpg" style="width: 210px;height: 193px;"></div>
						</div>
						<div class="right_mid_pic">
							<div><img src="../img/YSL.jpg" style="width: 210px;height: 193px;"></div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</body>
	<script>
		javaex.menu({
			id: "menu"
		});

		javaex.slide({
			id: "slide",
			effect: "slice"
		});

		$("#searchButton").click(function() {
			var text = $("#search").val();
			sessionStorage.setItem("context", text);
			window.location.href = "pages/showGoods.html";
		})

		window.onload = function() {
			var user = sessionStorage.getItem("user");
			var token = localStorage.getItem("token_user");
			if(token == null) {
				window.location = "./login.html"
			}
			if (token != null && user == null) {
				getSession() == 500 ? window.location = "./login.html" : '';
			}
		}
		loadLoginMsg();
	</script>

</html>
